<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/skin.css"/>
	</head>
	<body style="background: #cccccc;">
		<header class="mui-bar mui-bar-nav order-bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">订单详情</h1>
		</header>
		<div class="order order_es" id="order_es">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_es.png" alt="">
					<span>基本信息</span>
				</div>
				<div class="order_info">
					<div class="mui-cont mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>姓名：</span>
							<span>德意丽博</span>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-right">
							<span>性别：</span>
							<span>男</span>
						</div>
					</div>
					<div class="mui-cont mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>年龄：</span>
							<span>20</span>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>手机：</span>
							<span>12345678910</span>
						</div>
					</div>
					<div class="mui-cont mui-row">
						<span>地址：</span>
						<span>浙江.杭州.萧山.丽博橱柜</span>
					</div>
					<div class="mui-cont mui-row">
						<span>单号：</span>
						<span>20181206125458</span>
					</div>
					<div class="mui-cont mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>跟进客服：</span>
							<span style="color: dodgerblue;">125632</span>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>最近跟进：</span>
							<span>2018-12-06</span>
						</div>
					</div>
					<div class="mui-cont mui-row">
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>订单级别：</span>
							<span style="color: #B47D5F;">未定义</span>
						</div>
						<div class="mui-col-sm-6 mui-col-xs-6 mui-pull-left">
							<span>标签：</span>
							<span style="color: #B47D5F;">客服跟进</span>
						</div>
					</div>
					<div class="mui-cont mui-row">
						<span>回访时间：</span>
						<span>2018-12-06</span>
					</div>
					<div class="mui-cont mui-row">
						<span>状态：</span>
						<span style="color: dodgerblue;">无效订单</span>
						<span>[未定义]</span>
					</div>
					<div class="mui-cont mui-row">
						<span>派单时间：</span>
						<span>2018-12-06</span>
						<span>13:31:56</span>
					</div>
					<div class="mui-cont mui-row">
						<span>备注：</span>
						<span>这里写的都是备注这里写的都是备注这里写的都是备注这里写的都是备注这里写的都是备注这里写的都是备注</span>
					</div>
				</div>
			</div>
		</div>
		
		<div class="order order_de" id="order_de">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_de.png" alt="">
					<span>订金信息</span>
				</div>
				<div class="order_info">
					 <ul class="mui-table-view"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>金额：¥3,000,00</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>申请时间</th>
										<td>2018-12-06</td>
									</tr>
									<tr>
										<th>类型</th>
										<td>定金</td>
									</tr>
									<tr>
										<th>金额</th>
										<td>¥520.00</td>
									</tr>
									<tr>
										<th>操作一</th>
										<td>
											<button type="button" class="mui-btn mui-btn-warning">
												修改
											</button>
											<button style="margin: 0 8px;" type="button" class="mui-btn mui-btn-danger">
												删除
											</button>
										</td>
									</tr>
								</table>
							</div>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>金额：¥3,000,00</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>申请时间</th>
										<td>2018-12-06</td>
									</tr>
									<tr>
										<th>类型</th>
										<td>定金</td>
									</tr>
									<tr>
										<th>金额</th>
										<td>¥520.00</td>
									</tr>
									<tr>
										<th>操作一</th>
										<td>
											<button type="button" class="mui-btn mui-btn-warning">
												修改
											</button>
											<button type="button" style="margin: 0 8px;" class="mui-btn mui-btn-danger">
												删除
											</button>
										</td>
									</tr>
								</table>
							</div>
						</li>
					</ul>	
				</div>
			</div>
		</div>
		
		<div class="order order_co" id="order_co">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_co.png" alt="">
					<span>合同信息</span>
				</div>
				<div class="order_info">
					<table>
						<tr>
							<th>签订时间</th>
							<td>2018-12-06</td>
						</tr>
						<tr>
							<th>合同金额</th>
							<td>¥ 2,5000.00</td>
						</tr>
						<tr>
							<th>交货时间</th>
							<td>2018-12-06</td>
						</tr>
						<tr>
							<th>合同备注</th>
							<td>
								合同备注内容在此处显示，合同备注内容在此处显示
							</td>
						</tr>
					</table>
					<ul class="mui-table-view" style="margin-top: 10px;"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								附件1
								<!--<span class="mui-badge  mui-badge-primary" style="background: #dc1441;">5</span>-->
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>文件名</th>
										<td>cover</td>
									</tr>
									<tr>
										<th>操作人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>查看下载</th>
										<td>
											<button type="button" style="background: #B47D5F;"  class="mui-btn mui-btn-primary" style="background: #dc1441;">
												下载
											</button>
											<button type="button" style="margin: 0 8px;" class="mui-btn mui-btn-danger">
												删除
											</button>
										</td>
									</tr>
									<tr>
										<th>操作时间</th>
										<td>2018-12-06 14:53:56</td>
									</tr>
									<tr>
										<th>状态</th>
										<td style="color: #0e7b06;font-weight: 600;">正常</td>
									</tr>
								</table>
							</div>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								附件1
								<!--<span class="mui-badge  mui-badge-primary" style="background: #dc1441;">5</span>-->
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>文件名</th>
										<td>cover</td>
									</tr>
									<tr>
										<th>操作人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>查看下载</th>
										<td>
											<button type="button" style="background: #B47D5F;"  class="mui-btn mui-btn-primary" style="background: #dc1441;">
												下载
											</button>
											<button type="button" style="margin: 0 8px;" class="mui-btn mui-btn-danger">
												删除
											</button>
										</td>
									</tr>
									<tr>
										<th>操作时间</th>
										<td>2018-12-06 14:53:56</td>
									</tr>
									<tr>
										<th>状态</th>
										<td style="color: #0e7b06;font-weight: 600;">正常</td>
									</tr>
								</table>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="order order_ru" id="order_ru">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_ru.png" alt="">
					<span>量尺预约</span>
				</div>
				<div class="order_info">
					<ul class="mui-table-view"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>测试门店</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>类型</th>
										<td>预约量尺</td>
									</tr>
									<tr>
										<th>预约人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>备注</th>
										<td>测试量尺预约</td>
									</tr>
									<tr>
										<th>状态</th>
										<td>完成</td>
									</tr>
								</table>
							</div>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>测试门店</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>类型</th>
										<td>预约量尺</td>
									</tr>
									<tr>
										<th>预约人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>备注</th>
										<td>测试量尺预约</td>
									</tr>
									<tr>
										<th>状态</th>
										<td>完成</td>
									</tr>
								</table>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="order order_su" id="order_su">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_su.png" alt="">
					<span>预约记录</span>
				</div>
				<div class="order_info">
					<ul class="mui-table-view"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>测试门店</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>预约时间</th>
										<td>2018-12-06</td>
									</tr>
									<tr>
										<th>预约人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>预约类型</th>
										<td>约尺</td>
									</tr>
									<tr>
										<th>备注</th>
										<td>测试取消量尺预约</td>
									</tr>
									<tr>
										<th>状态</th>
										<td>取消</td>
									</tr>
								</table>
							</div>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>测试门店</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>预约时间</th>
										<td>2018-12-06</td>
									</tr>
									<tr>
										<th>预约人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>预约类型</th>
										<td>约尺</td>
									</tr>
									<tr>
										<th>备注</th>
										<td>测试取消量尺预约</td>
									</tr>
									<tr>
										<th>状态</th>
										<td>取消</td>
									</tr>
								</table>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="order order_fo" id="order_fo">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_fo.png" alt="">
					<span>跟进备注记录</span>
				</div>
				<div class="order_info">
					<ul class="mui-table-view"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>测试门店</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>跟进日期</th>
										<td>2018-12-06</td>
									</tr>
									<tr>
										<th>跟进类型</th>
										<td>交订</td>
									</tr>
									<tr>
										<th>跟进内容</th>
										<td>修改定金金额</td>
									</tr>
									<tr>
										<th>跟进状态</th>
										<td>有效</td>
									</tr>
									<tr>
										<th>操作时间</th>
										<td>2018-12-06 15:11:56</td>
									</tr>
								</table>
							</div>
						</li>
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
								<span>测试门店</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>跟进日期</th>
										<td>2018-12-06</td>
									</tr>
									<tr>
										<th>跟进类型</th>
										<td>交订</td>
									</tr>
									<tr>
										<th>跟进内容</th>
										<td>修改定金金额</td>
									</tr>
									<tr>
										<th>跟进状态</th>
										<td>有效</td>
									</tr>
									<tr>
										<th>操作时间</th>
										<td>2018-12-06 15:11:56</td>
									</tr>
								</table>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div class="order order_in" id="order_in">
			<div class="order_div">
				<div class="order_title">
					<img src="images/order_in.png" alt="">
					<span>无效申请记录</span>
				</div>
				<div class="order_info">
					<ul class="mui-table-view"> 
						<li class="mui-table-view-cell mui-collapse">
							<a class="mui-navigate-right">
								<span>2018-12-06</span>
							</a>
							<div class="mui-collapse-content">
								<table>
									<tr>
										<th>申请时间</th>
										<td>2018-12-06 15:11:56</td>
									</tr>
									<tr>
										<th>申请人</th>
										<td>测试门店</td>
									</tr>
									<tr>
										<th>内容</th>
										<td>超预算了</td>
									</tr>
									<tr>
										<th>状态</th>
										<td>取消</td>
									</tr>
									<tr>
										<th>操作</th>
										<td>
											<button type="button" class="mui-btn mui-btn-danger">
												操作
											</button>
										</td>
									</tr>
								</table>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div id="popover" class="mui-popover">
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="user.html">
						<span class="mui-icon mui-icon-person"></span>
						<div class="mui-media-body">用户编辑</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="measure.html">
						<span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
						<div class="mui-media-body">量尺预约</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="deposit.html">
						<span class="mui-icon mui-icon-checkmarkempty"></span>
						<div class="mui-media-body">已交订</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="return.html">
						<span class="mui-icon mui-icon-reload"></span>
						<div class="mui-media-body">回访预约</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="contact.html">
						<span class="mui-icon mui-icon-chatboxes"></span>
						<div class="mui-media-body">已联系</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
					<a href="contract.html">
						<span class="mui-icon mui-icon-download"></span>
						<div class="mui-media-body">已签合同</div>
					</a>
				</li>
			</ul>
		</div>
		<a href="#popover" id="openPopover"><span class="mui-icon mui-icon-gear"></span></a>
		
		<div id="touch" class="touch">
			<ul>
				<li><a style="color: #F39800;" href="#order_es">基本信息</a></li>
				<li><a style="color: #29a2f6;" href="#order_de">订金信息</a></li>
				<li><a style="color: #dc1441;" href="#order_co">合同信息</a></li>
				<li><a style="color: #b47d5f;" href="#order_ru">量尺预约</a></li>
				<li><a style="color: #1e9116;" href="#order_su">预约记录</a></li>
				<li><a style="color: #b47d5f;" href="#order_fo">跟进备注</a></li>
				<li><a style="color: #dc1441;" href="#order_in">无效申请</a></li>
			</ul>
		</div>
		
		
		<script src="js/mui.min.js" type="text/javascript"></script>
		<script src="js/flexible.js" type="text/javascript"></script>
		<script src="js/zepto.min.js" type="text/javascript"></script>
		
		<script type="text/javascript">
			var spheight = document.documentElement.clientHeight;
			var touchheight = document.getElementById("touch").offsetHeight;
			//console.log(touchheight);
			//滑动处理
			
			var startX, startY,t;
			document.addEventListener('touchstart',function (ev) {
				startX = ev.touches[0].pageX;
				startY = ev.touches[0].pageY;
			}, false);
			document.addEventListener('touchmove',function (ev) {
				clearTimeout(t);
				var endX, endY;
				endX = ev.changedTouches[0].pageX;
				endY = ev.changedTouches[0].pageY;
				var direction = GetSlideDirection(startX, startY, endX, endY);
				switch(direction) {
					case 0:
						// alert("无操作");
						break;
					case 1:
						// 向上
						$("#touch").show()
						break;
					case 2:
						// 向下
						$("#touch").show()
						break;
					default:
				}
			}, false);
			document.addEventListener('touchend',function (ev) {
				t=setTimeout(function(){
					$("#touch").hide()
				},8000);
			},false)
			function GetSlideDirection(startX, startY, endX, endY) {
				var dy = startY - endY;
				//var dx = endX - startX;
				var result = 0;
				if(dy > 0) {//向上滑动
					result = 1;
				} else if (dy < 0){//向下滑动
					result = 2;
				} else {
					result = 0;
				}
				return result;
			}
		</script>
	</body>
</html>
